<template>
    <transition>
        <el-dialog :title="dialogType === 'add' ? '添加教室申请' : '修改教室申请'" v-model="showFlag" width="600px" append-to-body
            @close="handleClose" @open="handleOpen">
            <el-form hide-required-asterisk ref="formRef" :rules="formRule" :model="formInfo" label-width="auto"
                style="padding:30px 30px 0 30px">
                <el-form-item label="教室名称" prop="classroomId">
                    <el-select placeholder="教室名称" v-model="formInfo.classroomId">
                        <el-option v-for="e in classrooms" :key="e" :value="e.id" :label="e.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学期" prop="semesterId">
                    <el-select placeholder="学期" v-model="formInfo.semesterId">
                        <el-option v-for="e in semester" :key="e" :value="e.id" :label="e.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="周次" prop="week">
                    <el-select placeholder="周次" v-model="formInfo.week">
                        <el-option v-for="e in semester.at(0)?.weekCount" :key="e" :value="e" :label="e"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="星期" prop="dayOfWeek">
                    <el-select placeholder="星期" v-model="formInfo.dayOfWeek">
                        <el-option v-for="e in dayOfWeek" :key="e" :value="e.value" :label="e.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="节次" prop="session">
                    <el-select placeholder="节次" v-model="formInfo.session">
                        <el-option v-for="e in session" :key="e" :value="e.value" :label="e.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请原因" prop="reason">
                    <el-input type="textarea" v-model="formInfo.reason" maxlength="100" rows="4"
                        show-word-limit></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 40px; margin-left: 372px; ">
                    <el-button @click="handleClose" size="mini">取消</el-button>
                    <el-button @click="formSubmit" size="mini" type="primary">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </transition>
</template>

<script setup>
import api from '@/api/api';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue';

const props = defineProps({
    dialogType: {
        type: String,
        default: 'add'
    }, showDialog: {
        type: Boolean
    },
    applyId:{
        default:''
    },
    editForm: {
        type: Object
    }
})
const emit = defineEmits(['dialogClosed'])
const showFlag = ref(false)

const classrooms = ref([
    // 有id, name, category, capacity字段
])
const semester = ref([
    // 有id, name, weekCount, isCurrentSemester字段
])
const dayOfWeek = ref([
    { label: '星期一', value: 1 },
    { label: '星期二', value: 2 },
    { label: '星期三', value: 3 },
    { label: '星期四', value: 4 },
    { label: '星期五', value: 5 },
    { label: '星期六', value: 6 },
    { label: '星期日', value: 0 },
])
const session = ([
    { label: '1-2', value: 0 },
    { label: '3-5', value: 1 },
    { label: '6-7', value: 2 },
    { label: '8-9', value: 3 },
    { label: '10-12', value: 4 },
    { label: '13-15', value: 5 },
])

const formRef = ref(null)

const formRule = ref({
    classroomId: [
        { required: true, message: '请填写教室名称', trigger: 'blur' }
    ],
    semesterId: [
        { required: true, message: '请填写学期', trigger: 'blur' }
    ],
    week: [
        { required: true, message: '请填写周次', trigger: 'blur' }
    ],
    dayOfWeek: [
        { required: true, message: '请填写星期', trigger: 'blur' }
    ],
    session: [
        { required: true, message: '请填写节次', trigger: 'blur' }
    ],
    reason: [
        { required: true, message: '请填写申请原因', trigger: 'blur' }
    ],
})
const formInfo = reactive(
    {
        'classroomId': '', 'semesterId': '', 'week': '', 'dayOfWeek': '',
        'session': '', 'reason': '',
    },
)
const formSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            if (props.dialogType == 'add') {
                api.classroom_application.add(formInfo.week, formInfo.session, formInfo.reason,
                    formInfo.classroomId, sessionStorage.getItem('userid'), formInfo.semesterId, formInfo.dayOfWeek
                ).then((res) => {
                    ElMessage({
                        message: '添加成功',
                        type: 'success'
                    })
                }).catch((err) => {
                    console.log(err)
                })

                handleClose()
            } else {
                api.classroom_application.edit(props.applyId,formInfo.week, formInfo.session, formInfo.reason,
                    formInfo.classroomId, sessionStorage.getItem('userid'), formInfo.semesterId, formInfo.dayOfWeek
                ).then((res) => {
                    ElMessage({
                        message: '修改成功',
                        type: 'success'
                    })
                }).catch((err) => {
                    console.log(err)
                })

                handleClose()
            }

        }
    })
}
const handleClose = () => {
    showFlag.value = false
    formRef.value.resetFields()
    emit('dialogClosed')
}
const handleOpen = () => {
    if (props.dialogType==='edit'){
        formInfo.classroomId=props.editForm.classroomId
        formInfo.semesterId=props.editForm.semesterId
        formInfo.week=props.editForm.week
        formInfo.dayOfWeek=props.editForm.dayOfWeek
        formInfo.session=props.editForm.session
        formInfo.reason=props.editForm.reason
    }
}

watch(() => props.showDialog, (newValue, oldValue) => {
    showFlag.value = props.showDialog
})


onMounted(() => {
    api.semester.get_all().then((res) => {
        semester.value = res.data.data
    }).catch((err) => {
        console.log(err)
    })
    api.classroom.get_all().then((res) => {
        classrooms.value = res.data.data
    }).catch((err) => {
        console.log(err)
    })
})
</script>